<template>
  <div>
    <div class="container">
      <div class="content">
        <div class="contact">
          <input type="text" placeholder="请选择" readonly v-model="value" @click="handleClick">
        </div>
      </div>
    </div>
    <mt-datetime-picker
      v-model="pickerValue"
      ref="picker"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日">
    </mt-datetime-picker>
  </div>
</template>
<script>
  export default {
    name: 'componentB',
    data() {
      return {
        pickerValue: '',
      }
    },
    computed: {
      value() {
        if(this.pickerValue) {
          var year, month, day;
          var newDate = new Date(this.pickerValue);
          //console.log(newDate);
          year = newDate.getFullYear();
          month = newDate.getMonth() + 1;
          day = newDate.getDate();
          return year + '-' + month + '-' + day
        }

      }
    },
    methods: {
      handleClick() {
        this.$refs.picker.open();
      }
    }
  }
</script>
<style scoped>
  .content .contact {
    margin: 1rem 1rem;
  }
  .content .contact input {
    height: 3.5rem;
    display: block;
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    margin-top: .5rem;
    padding: .5rem 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>
